<template>
    <div class="article-page" v-if="article">
        <article class="article-page-box">
            <div class="article-banner" >
                <!-- <img :src="article.cover" alt=""> -->
                <div class="article-banner-top">
                    <h3>{{article.title}}</h3>
                    <h4>{{article.desc}}</h4>
                    <div class="label"><span>{{article.tag}}</span></div>
                </div>
            </div>
            <div class="article-ct ql-container" v-html="article.content"></div>
        </article>
        <cp-footer></cp-footer>
    </div>
</template>


<script>
export default {
    data(){
        return {
            article:''
        }
    },
    created(){
        
    },
    mounted(){
        this.note();
    },
    components: {
        cpFooter:() => import('../components/footer'),
    },
    methods:{
        note(){
            this.$http.get(`${this.$URL_HTTP}/note?id=${this.$route.query.id}`).then( (res) => {
                console.log(res)
                if(res.data.status){
                    this.article = res.data.payload.note
                }
            })
        }
    }
}
</script>

<style lang="less">
.article-page{
    width:100%;
    .article-page-box{
        width:100%;
        .article-banner{
            width:100%;
            position: relative;
            height:200px;
            .article-banner-top{
                max-width:1000px;
                height:100%;
                text-align: center;
                margin:0 auto;
                position: relative;
            }
            .label{
                line-height: 35px;
                font-size:14px;
                color:rgb(72, 72, 72);
                display: block;
                width:100%;
                position: absolute;
                bottom:0;
                left:0;
                text-align: left;
                border-bottom: 1px solid #eee;
                padding-bottom:10px;
                span{
                    display:inline-block;
                    background:rgb(248, 248, 248);
                    padding:0 10px;
                    border-radius:5px;
                }
            }
            h3{
                font-size:32px;
                font-weight: 400;
                color:rgb(72, 72, 72);
                padding-top:50px;
                font-family:'SimSun';
            }
            h4{
                font-size:20px;
                color:#808080;
                margin:20px 0;
                font-weight:400;
            }
        }
        .article-ct{
            max-width:1000px;
            margin:30px auto 50px;
            padding:0 10px;
        }
        img{
            margin:0 auto 10px;
            display:block;
        }
        
    }
    
}
</style>


